<template>
  <div class="space-y-6">
    <div class="flex justify-between items-center">
      <div>
        <h1 class="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
          魂魄详情
        </h1>
        <div class="text-sm breadcrumbs mt-1">
          <ul>
            <li><a @click="router.push('/')">首页</a></li>
            <li><a @click="router.push('/souls')">魂魄管理</a></li>
            <li>魂魄详情</li>
          </ul>
        </div>
      </div>
      <div class="flex gap-2">
        <button class="btn btn-primary" @click="router.push(`/souls/${id}/edit`)">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
          </svg>
          编辑信息
        </button>
        <div class="dropdown dropdown-end">
          <button class="btn btn-ghost">
            更多操作
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
          <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
            <li><a @click="router.push(`/judgments/new?soulId=${id}`)">分配审判</a></li>
            <li><a @click="router.push(`/reincarnation/new?soulId=${id}`)">开始轮回</a></li>
            <li><a @click="router.push(`/hell/new?soulId=${id}`)" class="text-error">打入地狱</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 基本信息 -->
      <div class="card bg-base-100 shadow-xl lg:col-span-2">
        <div class="card-body">
          <h2 class="card-title">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
            </svg>
            基本信息
          </h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="form-control">
              <label class="label">
                <span class="label-text font-medium">姓名</span>
              </label>
              <input type="text" :value="soul.name" class="input input-bordered" disabled />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-medium">性别</span>
              </label>
              <input type="text" :value="soul.gender === 'male' ? '男' : '女'" class="input input-bordered" disabled />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-medium">年龄</span>
              </label>
              <input type="text" :value="soul.age" class="input input-bordered" disabled />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-medium">生辰</span>
              </label>
              <input type="text" :value="formatDate(soul.birthDate)" class="input input-bordered" disabled />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-medium">祭日</span>
              </label>
              <input type="text" :value="formatDate(soul.deathDate)" class="input input-bordered" disabled />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-medium">阳寿</span>
              </label>
              <input type="text" :value="soul.lifespan" class="input input-bordered" disabled />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-medium">籍贯</span>
              </label>
              <input type="text" :value="soul.birthplace" class="input input-bordered" disabled />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text font-medium">状态</span>
              </label>
              <div class="input input-bordered flex items-center">
                <div class="badge" :class="getStatusBadgeClass(soul.status)">
                  <span v-if="soul.status === 'processing'" class="w-2 h-2 rounded-full bg-current animate-pulse mr-1"></span>
                  <span v-else class="w-2 h-2 rounded-full bg-current mr-1"></span>
                  {{ getStatusLabel(soul.status) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 状态卡片 -->
      <div class="space-y-6">
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
              </svg>
              状态信息
            </h2>
            <div class="stats stats-vertical shadow">
              <div class="stat">
                <div class="stat-title">功德值</div>
                <div class="stat-value text-primary">{{ soul.merit }}</div>
                <div class="stat-desc">较平均值 ↗︎ 14%</div>
              </div>
              <div class="stat">
                <div class="stat-title">罪孽值</div>
                <div class="stat-value text-secondary">{{ soul.sin }}</div>
                <div class="stat-desc">较平均值 ↘︎ 7%</div>
              </div>
              <div class="stat">
                <div class="stat-title">轮回次数</div>
                <div class="stat-value">{{ soul.reincarnationCount }}</div>
                <div class="stat-desc">上次轮回于 30 天前</div>
              </div>
            </div>
          </div>
        </div>

        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
              </svg>
              最近记录
            </h2>
            <div class="space-y-4">
              <div v-for="record in soul.records" :key="record.id" class="flex items-center gap-3 p-3 bg-base-200 rounded-lg">
                <div class="w-2 h-2 rounded-full" :class="getRecordTypeClass(record.type)"></div>
                <div class="flex-1">
                  <div class="font-medium">{{ record.title }}</div>
                  <div class="text-sm text-base-content/60">{{ formatDate(record.time) }}</div>
                </div>
                <div class="badge" :class="getRecordTypeBadgeClass(record.type)">
                  {{ getRecordTypeLabel(record.type) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { formatDate } from '@/utils/date'
import { SoulService } from '@/api/services'
import { useLoadingStore } from '@/stores/loading'
import { useToast } from '@/composables/useToast'

const route = useRoute()
const router = useRouter()
const loadingStore = useLoadingStore()
const toast = useToast()
const id = route.params.id as string

interface Record {
  id: number
  type: 'judgment' | 'reincarnation' | 'hell'
  title: string
  time: string
}

interface Soul {
  id: number
  name: string
  gender: string
  age: number
  birthDate: string
  deathDate: string
  lifespan: number
  birthplace: string
  status: 'waiting' | 'processing' | 'completed'
  createdAt: string
  merit: number
  sin: number
  reincarnationCount: number
  records: Record[]
}

// 模拟数据
const soul = ref<Soul>({
  id: 1,
  name: '张三',
  gender: 'male',
  age: 30,
  birthDate: '1994-05-15',
  deathDate: '2024-03-09',
  lifespan: 30,
  birthplace: '北京',
  status: 'processing',
  createdAt: '2024-03-09T04:35:00.000Z',
  merit: 78,
  sin: 23,
  reincarnationCount: 3,
  records: [
    {
      id: 1,
      type: 'judgment',
      title: '阎王审判完成',
      time: '2024-03-09T05:30:00.000Z',
    },
    {
      id: 2,
      type: 'reincarnation',
      title: '准备转世投胎',
      time: '2024-03-09T06:15:00.000Z',
    },
    {
      id: 3,
      type: 'hell',
      title: '小惩大诫',
      time: '2024-03-09T07:00:00.000Z',
    },
  ],
})

// 工具函数
const getStatusBadgeClass = (status: string) => {
  switch (status) {
    case 'waiting':
      return 'badge-warning'
    case 'processing':
      return 'badge-info'
    case 'completed':
      return 'badge-success'
    default:
      return ''
  }
}

const getStatusLabel = (status: string) => {
  switch (status) {
    case 'waiting':
      return '待处理'
    case 'processing':
      return '处理中'
    case 'completed':
      return '已完成'
    default:
      return status
  }
}

const getRecordTypeClass = (type: string) => {
  switch (type) {
    case 'judgment':
      return 'bg-primary'
    case 'reincarnation':
      return 'bg-secondary'
    case 'hell':
      return 'bg-accent'
    default:
      return ''
  }
}

const getRecordTypeBadgeClass = (type: string) => {
  switch (type) {
    case 'judgment':
      return 'badge-primary'
    case 'reincarnation':
      return 'badge-secondary'
    case 'hell':
      return 'badge-accent'
    default:
      return ''
  }
}

const getRecordTypeLabel = (type: string) => {
  switch (type) {
    case 'judgment':
      return '审判'
    case 'reincarnation':
      return '轮回'
    case 'hell':
      return '地狱'
    default:
      return type
  }
}

const loadSoul = async () => {
  try {
    loadingStore.show()
    const data = await SoulService.getSoul(id)
    soul.value = data
  } catch (error: any) {
    toast.error(error.message)
  } finally {
    loadingStore.hide()
  }
}

onMounted(() => {
  loadSoul()
})
</script>

<style scoped>
.badge {
  @apply px-2 py-1;
}
</style>
